<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" />
<title>科室处理时长 - 萌迹(Cute Trail Admin)后台管理系统</title>
<link rel="icon" href="petvet.ico" type="image/ico">
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/materialdesignicons.min.css" rel="stylesheet">
<link href="css/style.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/echarts@5.4.3/dist/echarts.min.js"></script>
    <style>
        body {
            font-family: 'Arial', sans-serif;
            margin: 0;
            padding: 20px;
            background-color: #f5f7fa;
        }
        .container {
            max-width: 8000px;
            margin: 0 auto;
            background-color: white;
            border-radius: 8px;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
            padding: 20px;
        }
        .header {
            text-align: center;
            margin-bottom: 20px;
            padding-bottom: 10px;
            border-bottom: 1px solid #eee;
        }
        .title {
            font-size: 20px;
            font-weight: bold;
            color: #333;
        }
        .chart-container {
            width: 100%;
            height: 400px;
        }
        .filters {
            display: flex;
            justify-content: center;
            gap: 15px;
            margin-bottom: 15px;
        }
        select {
            padding: 8px 12px;
            border-radius: 4px;
            border: 1px solid #ddd;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="header">
            <div class="title">各科室平均处理时长分析</div>
            <div class="filters">
                <select id="timeRange">
                    <option value="7">最近7天</option>
                    <option value="30" selected>最近30天</option>
                    <option value="90">最近3个月</option>
                </select>
                <select id="petType">
                    <option value="all">全部宠物</option>
                    <option value="dog">犬类</option>
                    <option value="cat">猫类</option>
                    <option value="other">其他</option>
                </select>
            </div>
        </div>
        <div id="durationChart" class="chart-container"></div>
    </div>

    <script>
        // 初始化图表
        const chartDom = document.getElementById('durationChart');
        const myChart = echarts.init(chartDom);
        
        // 图表配置
        const option = {
            tooltip: {
                trigger: 'axis',
                axisPointer: {
                    type: 'shadow'
                },
                formatter: '{b}: {c}分钟'
            },
            grid: {
                left: '3%',
                right: '4%',
                bottom: '3%',
                containLabel: true
            },
            xAxis: {
                type: 'value',
                name: '分钟',
                axisLine: {
                    lineStyle: {
                        color: '#999'
                    }
                },
                axisLabel: {
                    color: '#666'
                },
                splitLine: {
                    lineStyle: {
                        type: 'dashed'
                    }
                }
            },
            yAxis: {
                type: 'category',
                data: ['牙科', '皮肤科', '急诊', '内科', '外科'],
                axisLine: {
                    show: false
                },
                axisTick: {
                    show: false
                },
                axisLabel: {
                    color: '#333',
                    fontSize: 14
                }
            },
            series: [
                {
                    name: '处理时长',
                    type: 'bar',
                    data: [42, 38, 25, 35, 55],
                    itemStyle: {
                        color: function(params) {
                            // 不同科室使用不同颜色
                            const colorList = ['#5470C6', '#91CC75', '#FAC858', '#EE6666', '#73C0DE'];
                            return colorList[params.dataIndex];
                        },
                        borderRadius: [0, 4, 4, 0]
                    },
                    label: {
                        show: true,
                        position: 'right',
                        formatter: '{c}分钟',
                        color: '#333'
                    },
                    barWidth: '60%'
                }
            ]
        };

        // 应用配置
        myChart.setOption(option);

        // 响应式调整
        window.addEventListener('resize', function() {
            myChart.resize();
        });

        // 模拟筛选功能
        document.getElementById('timeRange').addEventListener('change', updateData);
        document.getElementById('petType').addEventListener('change', updateData);

        function updateData() {
            // 根据筛选条件模拟不同数据
            const timeRange = document.getElementById('timeRange').value;
            const petType = document.getElementById('petType').value;
            
            // 模拟数据变化
            const baseData = {
                '7': [38, 35, 22, 32, 50],
                '30': [42, 38, 25, 35, 55],
                '90': [45, 40, 28, 38, 60]
            };
            
            const petModifier = {
                'all': 1,
                'dog': 1.1,
                'cat': 0.9,
                'other': 1.2
            };
            
            let newData = baseData[timeRange].map(value => 
                Math.round(value * petModifier[petType])
            );
            
            option.series[0].data = newData;
            myChart.setOption(option);
        }
    </script>
</body>
</html>